<template>
  <div class="CPU" ref="CPU"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "CPU",
  props: ["cpu"],
  data() {
    return {};
  },
  watch: {
    cpu(newValue, oldValue) {
      // console.log(newValue, oldValue, 5555);
      this.drawImgThree();
      immediate: true; //打开组件立即侦听 ******
    } 
  },
  methods: {
    drawImgThree() {
      let myChart = echarts.init(this.$refs.CPU);
      let options = {
        title: {
          text: "CPU使用率",
          left: "left",
          textStyle: {
            fontSize: 14
          }
        },
        color: ["#fac858", "#ee6666", "#DDDDDD"],
        tooltip: {
          trigger: "item"
        },
        legend: {
          orient: "vertical",
          // 距离右边1%
          right: "1%",
          // 小方块的宽高
          itemWidth: 20,
          itemHeight: 12
        },
        series: [
          {
            name: "CPU使用率%",
            type: "pie",
            radius: "50%",
            // 箭头隐藏
            label: {
              show: false
            },
            data: [
              { value: this.cpu.used, name: "用户" },
              { value: this.cpu.sys, name: "系统" },
              { value: this.cpu.free, name: "空闲" }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      };
      myChart.setOption(options);
    }
  },
  mounted(){
    
  }
};
</script>

<style lang="less" scoped>
.CPU {
  width: 100%;
  height: 100%;
}
</style>
